<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet"  th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/bootstrapStyle.css}" type="text/css">
</head>
<style>
    input.error { border: 1px solid red; }
    label.error {
        font-weight: bold;
        color: red;
    }

</style>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}" ></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"> </script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"> </script>
<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/js/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/js/bootstrapValidator.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.exedit.js}"></script>
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<script th:src="@{/js/base.js}"></script>
<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>

<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">用户管理</a></li>
                <li class="breadcrumb-item active">用户信息</li>
            </ul>
        </div>
    </div>
    <!--新增用户div start -->
    <section class="forms">
        <div class="container-fluid">
            <div class="col-lg-12 mt-3">
                <div class="card">
                    <div class="card-header d-flex align-items-center" th:if="${null == user.id}">
                        <h4>新增</h4>
                    </div>
                    <div class="card-header d-flex align-items-center" th:if="${null != user.id}">
                        <h4>编辑</h4>
                    </div>

                    <!--数据字段-->
                    <div class="card-body">
                        <form class="form-horizontal" th:action="@{/sys/user/save}" method="post" id="userForm">
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">用户名  <em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <input type="hidden" th:value="${user.id}" name="id" class="userId"/>
                                    <input type="hidden" th:value="${orgTree}"  id="orgTreeInfo"/>
                                    <input type="text" placeholder="" th:value="${user.name}"
                                           name="name" id="name" class="form-control" />
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">性别<em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <div>
                                        <input id="useSex1" type="radio"  th:checked="${user.userSex}" value="1" name="userSex">
                                        <label for="useSex1">男</label>
                                        <input  id="useSex2"  type="radio"   th:checked="${user.userSex}"  value="2" name="userSex">
                                        <label for="useSex2">女</label>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">登录名<em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <input type="text" placeholder="英文或者数字组合" th:value="${user.userLoginName}" name="userLoginName"
                                           id="userLoginName" class="form-control" />
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">手机号<em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <input type="text" placeholder="" name="userPhone" id="userPhone"
                                           th:value="${user.userPhone}"class="form-control" />
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">组织<em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <input  type="hidden" id="orgId" name="orgId" th:value="${dSysOrg.id}"/>
                                    <input id="orgSel" type="text" name ="orgSel"  th:value="${dSysOrg.orgName}" class="form-control orgSel" readonly />
                                </div>
                                <!--style="display:none ;position: absolute;; "-->
                                <div id="menuContent" class="menuContent" style="display:none" >
                                    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">角色<em style="color: red;">*</em></label>
                                <div class="col-sm-4">
                                    <select name="roleId" class="form-control" >
                                        <option value="">请选择</option>
                                        <div th:each="role:${roleList}">
                                            <option  th:value="${role.id}" th:text="${role.roleDesc}"  th:selected="${user.roleId == role.id}"></option>
                                        </div>
                                    </select>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">邮箱</label>
                                <div class="col-sm-4">
                                    <input type="text" placeholder="" name="userMail" th:value="${user.userMail}" id="userMail" class="form-control" />
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">职位</label>
                                <div class="col-sm-4">
                                    <input type="text" placeholder="" name="userDuty" th:value="${user.userDuty}" id="userDuty" class="form-control" />
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">职责</label>
                                <div class="col-sm-4">
                                    <textarea type="text" class="form-control" name="userPosition"
                                              th:text="${user.userPosition}" id="userPosition" rows="3">

                                    </textarea>
                                </div>
                            </div>
                            <div class="line"></div>

                            <div class="form-group row">
                                <label class="col-sm-2 form-control-label">排序</label>
                                <div class="col-sm-4">
                                    <input type="text" placeholder="" name="userOrder" th:value="${user.userOrder}" id="userOrder" class="form-control" />
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 offset-sm-2">
                                    <a th:href="@{/sys/user/list}" class="btn btn-secondary ml-1">返回</a>
                                    <button type="submit" class="btn btn-success ml-5">提交</button>
                                </div>
                                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" th:if="${_csrf}"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--新增用户div end -->
</div>

</body>
<script type="text/javascript">
    //表单验证
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                userLoginName: {
                    message: '登录名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '登录名称不能为空'
                        },
                        callback: {
                            message: '登录名称已存在',
                            callback: function (value, validator, $field) {
                                var userLoginName = $("#userLoginName").val();
                                var userId = $(".userId").val();
                                var ReLoginName =  '[[${user.userLoginName}]]';
                                var flag = userLoginName == ReLoginName;
                                if (null != userId && flag ) {
                                    return true
                                }else {
                                    var bol = true;
                                    var header = $("meta[name='_csrf_header']").attr("content");
                                    var token = $("meta[name='_csrf']").attr("content");
                                    $.ajax({
                                        url: '/dianthus/api/user/countLoginName?userLoginName='+userLoginName,
                                        type: 'GET',
                                        async: false,
                                        beforeSend : function(xhr) {
                                            xhr.setRequestHeader(header, token);
                                        },
                                        success: function (result) {
                                            if (result.success) {
                                                bol = true;
                                            }else {
                                                bol = false;
                                            }
                                        }
                                    });
                                    return bol
                                }

                            }
                        }

                    }
                },
                userSex: {
                    message: '性别验证失败',
                    validators: {
                        notEmpty: {
                            message: '请选择性别'
                        },
                    }
                },
                userPhone: {
                    message: '手机号验证失败',
                    validators: {
                        notEmpty: {
                            message: '手机号码不能为空'
                        },
                    }
                },
                orgSel: {
                    message: '组织验证失败',
                    validators: {
                        notEmpty: {
                            message: '请选择用户组织信息'
                        }
                    }
                },
               roleId: {
                    message: '角色验证失败',
                    validators: {
                        notEmpty: {
                            message: '请选择用户角色'
                        }
                    }
                }
            }

        });
        //ztree 设置
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            view: {
                dblClickExpand: false,
                showLine:false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick,
                onCheck: onCheck
            }
        };
        var nodesStr =$("#orgTreeInfo").val();
        var zNodes =JSON.parse(nodesStr);
        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getCheckedNodes(true),
                v = "";
            for (var i=0, l=nodes.length; i<l; i++) {
                v += nodes[i].name + ",";
            }
            if (v.length > 0 ) v = v.substring(0, v.length-1);
            var orgObj = $("#orgSel");
            orgObj.val(v);
            $("#orgId").val(nodes[0].id)
            //重新触发表单验证事件
            $('form').bootstrapValidator('enableFieldValidators','orgSel', true,'notEmpty');
        }
        $(".orgSel").on('click',function () {
            var orgObj = $("#orgSel");
            var orgOffset = $("#orgSel").offset();
            $("#menuContent").css({left:orgOffset.left + "px", top:orgOffset.top + orgObj.outerHeight() + "px"}).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        });
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "orgSel" ||
                event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                hideMenu();
            }
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    })

</script>

</html>